<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加企业</title>
    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" />
    <style>
        .container { width: 86%; margin: 0 auto; }
        .layui-input-inline {
            width: 250px !important;
        }
    </style>
</head>
<body>
    <div class="container">
        <form id="customerForm" class="layui-form" lay-filter="customerForm">
            <div class="layui-form-item">
                <label class="layui-form-label">企业名称</label>
                <div class="layui-input-inline">
                    <input type="text" id="name" name="name" required lay-verify="required|customerName" class="layui-input" maxlength="32" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">英文名</label>
                <div class="layui-input-inline">
                    <input type="text" id="name_en" name="name_en" required lay-verify="required|customerNameEn" class="layui-input" maxlength="32" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">企业信息</label>
                <div class="layui-input-inline">
                    <textarea id="remark" name="remark" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item" style="display: none;">
                <button class="layui-btn" lay-submit lay-filter="submitBtn">立即提交</button>
            </div>
        </form>
    </div>

    <script src="../../static/admin/layui2.9.13/layui.js" type="text/javascript" charset="utf-8"></script>
    <script>
        layui.use(['form', 'layer', 'jquery'], function () {
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.jquery;

            // 自定义表单验证规则
            form.verify({
                customerName: function(value, item) {
                    if (value.length < 3) {
                        return '企业名称长度至少3个字符';
                    }
                    if (value.length > 32) {
                        return '企业名称长度不能超过32个字符';
                    }
                },
                customerNameEn: function(value, item) {
                    if (value.length < 3) {
                        return '英文名长度至少3个字符';
                    }
                    if (value.length > 32) {
                        return '英文名长度不能超过32个字符';
                    }
                }
            });

            // 检查企业名称是否已存在
            $('#name').on('blur', function() {
                var name = $(this).val();
                $.ajax({
                    url: '/checkCustomerName',
                    type: 'POST',
                    data: { name: name },
                    success: function(response) {
                        if (response.exists) {
                            layer.msg('企业名称已存在');
                        }
                    }
                });
            });

            // 监听提交事件
            form.on('submit(submitBtn)', function(data) {
                var formData = data.field;
                $.ajax({
                    url: '/addCustomer',
                    type: 'POST',
                    data: formData,
                    success: function(response) {
                        if (response.code === 0) {
                            layer.msg('企业添加成功');
                            // 获取父窗口的layer对象
                            var parentLayer = parent.layer;
                            // 刷新父页面的表格
                            parent.layui.table.reload('customerTable');
                            // 关闭弹窗
                            var index = parentLayer.getFrameIndex(window.name);
                            parentLayer.close(index);
                        } else {
                            layer.msg(response.msg || '添加失败');
                        }
                    },
                    error: function() {
                        layer.msg('服务器错误，请稍后重试');
                    }
                });
                return false;
            });
        });
    </script>
</body>
</html>
